<template>
  <div class="app-container calendar-list-container">
    <div v-if="visible">
      <el-button class="filter-item" type="primary" @click="cancel">返回</el-button>
      <grid :columns="columns" :multi="false" :url="queryUrl" ref="authGrid" height="auto" diffHeight="155" method="post" :loading="false" @switch="doSwitch" :pagination="false"
        rowKey="menuCode" :indexNo="true">
      </grid>
    </div>
  </div>
</template>

<script>
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'
import url from '@/const/apiURL'
import grid from '@/components/TreeGrid'
import { MenuTypeFormatter } from '@/const/dict'
export default {
  components: { grid },
  data () {
    return {
      row: null,
      queryUrl: url.MENU_AUTH_TREE_URL,
      columns: [
        //{ label: '', width: 80, prop: 'children', align: 'left',template:'tree'},
        { label: '菜单名称', width: 300, prop: 'menuName', align: 'left' },
        // { label: '权限编码', width: 120, prop: 'permission', align: 'left' },
        // { label: '前端请求', Width: 200, prop: 'menuUrl', align: 'left' },
        // { label: '后端请求', Width: 200, prop: 'menuAuth', align: 'left' },
        { label: '图标', width: 50, prop: 'icon', align: 'center', template: 'icon' },
        { label: '类型', width: 120, prop: 'menuType', align: 'center', formatter: MenuTypeFormatter, template: 'bgColor', bgColor: { 'BTN': 'orange', 'MENU': 'green' } },
        { label: '授权', width: 80, prop: 'auth', align: 'left', template: 'switch' }
      ]
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  methods: {
    init (row) {
      this.$nextTick(() => {
        this.row = row
        //查询
        this.$refs['authGrid'].doQuery(null, { code: row.roleCode })
      })
    },
    cancel () {
      this.$emit('cancel')
    },
    doSwitch (row, value) {
      const params = {
        roleCode: this.row.roleCode,
        menuCode: row.menuCode
      }
      if (value) {
        this.handleAdd(params).then(result => { })
      } else {
        this.handleRemove(params).then(result => { })
      }
    },
    handleAdd (data) {
      return request({
        url: url.ROLE_AUTH_ADD_URL,
        method: 'post',
        data: data
      })
    },
    handleRemove (data) {
      return request({
        url: url.ROLE_AUTH_REMOVE_URL,
        method: 'post',
        data: data
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
